<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="所属公司">
        <el-select v-model="formInline.gongsiSel" @change="initData" placeholder="所属公司">
          <el-option v-for="val in gongsiList" :key="val.id" :label="val.name" :value="val.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工单状态">
        <el-select v-model="formInline.status" @change="initData" placeholder="工单状态">
          <el-option v-for="val in $store.state.user.TicketStatus" :key="val.value" :label="val.name" :value="val.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="check">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" icon="el-icon-download" @click="handleExport">
      下载选中的PDF文件
    </el-button>

    <el-table :data="dataList" style="width: 100%;margin-top:30px;" :default-sort = "{prop: 'name', order: 'descending'}" border>
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column align="center" prop="name" label="工单编号">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备名称">
        <template slot-scope="scope">
          {{ scope.row.deviceName }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="上下货责任人名称">
        <template slot-scope="scope">
          {{ scope.row.ownerName }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="上下货状态">
        <template slot-scope="scope">
          {{ $store.state.user.TicketStatus[scope.row.status].name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">
          {{ timeChange(scope.row.created) }}
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="160">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleAddRole(scope)">
            详情
          </el-button>
          <el-button type="primary" size="small" @click="handleEdit(scope)">
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" title="商品详情">
      <el-table :data="role.details" style="width: 100%;margin-top:30px;" border>
        <el-table-column align="center" prop="name" label="排，列">
          <template slot-scope="scope">
            {{ scope.row.skuLoc }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品名称">
          <template slot-scope="scope">
            {{ scope.row.skuName }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品条码">
          <template slot-scope="scope">
            {{ scope.row.skuBarcode }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品图片">
          <template slot-scope="scope">
            <img style="width: 20px;" :src="scope.row.skuImg" alt="">
          </template>
        </el-table-column>
        <el-table-column align="center" label="补货数量">
          <template slot-scope="scope">
            {{ scope.row.shortage }}
          </template>
        </el-table-column>     
      </el-table>
    </el-dialog>
    <el-dialog :visible.sync="editshow" title="修改上下货工单状态">
      <el-form :model="role" :rules="rules" label-width="160px" label-position="left">
        <el-form-item label="上下货工单状态">
          <el-select v-model="role.status" placeholder="所属公司">
            <el-option v-for="val in $store.state.user.TicketStatus" :key="val.value" :label="val.name" :value="val.value"></el-option>
          </el-select>
        </el-form-item>
        <!-- v-if="role.status == 3 || role.status == 4" -->
        <el-table v-if="role.status == 3 || role.status == 4" :data="role.details" style="width: 100%;margin-top:30px;" border>
          <el-table-column align="center" prop="name" label="排，列">
            <template slot-scope="scope">
              {{ scope.row.skuLoc }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="商品名称">
            <template slot-scope="scope">
              {{ scope.row.skuName }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="上货数量">
            <template slot-scope="scope">
              <el-input type="number" v-model="role.details[scope.$index].onCount" placeholder="上货数量"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="下货数量">
            <template slot-scope="scope">
              <el-input type="number" v-model="role.details[scope.$index].offCount" placeholder="下货数量"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="现有数量">
            <template slot-scope="scope">
              <el-input type="number" v-model="role.details[scope.$index].realCount" placeholder="现有数量"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <!-- <textarea style="width: 100%;padding: 20px 20px;margin-top: 20px;" placeholder="异常备注" autofocus="autofocus" v-model="role.abnormalFeedback" cols="20" rows="5"></textarea> -->
        <el-input style="width: 100%;margin-top: 20px;" v-if="role.status == 4" type="textarea" :rows="5" placeholder="异常备注" v-model="role.abnormalFeedback" />
      </el-form>
      <div style="text-align:right;margin-top: 40px;">
        <el-button type="danger" @click="editshow=false">
          取消
        </el-button>
        <el-button type="primary" @click="confirmRole">
          确定
        </el-button>
      </div>
    </el-dialog>
    <Pagination :total="total" :page="page+1" @pagination="pagination" />
  </div>
</template>

<script>
import { deepClone } from '@/utils'
import { postTicket, postTicketFind, getTicket, putTicket } from '@/api/OperationTicket'
import Pagination from '@/components/Pagination/index'

const defaultRole = {
  "status": 0,
  "deviceId": "",
  "isAbnormal": true,
  "abnormalFeedback": "",
  "ownerId": "",
  "ownerName": "",
  "details": [
    {
      "skuId": "",
      "skuLoc": "",
      "skuBarcode": "",
      "skuName": "",
      "skuImg": "",
      "shortage": 0,
      "max": 0,
      "onCount": 0,
      "offCount": 0,
      "realCount": 0
    }
  ]
}

export default {
  data() {
    return {
      role: Object.assign({}, defaultRole),
      routes: [],
      dataList: [],
      dialogVisible: false,
      dialogFillBuckle: false,
      dialogType: 'new',
      checkStrictly: false,
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      gongsiList:[],
      rules: {
        name: [
          { required: true, message: '请输入分公司名称' },
        ],
        address: [
          { required: false, message: '请输入公司地址' },
        ],
        phone: [
          { required: false, message: '请输入联系方式' },
        ],
        phone: [
          { required: false, message: '请输入联系方式' },
        ],
      },
      options1: [{
        value: '选项1',
        label: '测试设备'
      }, {
        value: '选项2',
        label: '预投放设备'
      }, {
        value: '选项3',
        label: '运营设备'
      }, {
        value: '选项4',
        label: '停用设备'
      }],
      options2: [{
        value: '选项1',
        label: '已采购'
      }, {
        value: '选项2',
        label: '已注册'
      }, {
        value: '选项3',
        label: '已激活'
      }, {
        value: '选项4',
        label: '正常'
      }, {
        value: '选项5',
        label: '维护中'
      }, {
        value: '选项6',
        label: '异常设备'
      }],
      orderList: [],
      total: 0,
      page: 0,
      formInline: {
        gongsiSel:'',
        status:0
      },
      editshow: false,
      deviceDetail:[],
      orderId: '',
    }
  },
  computed: {},
  components: { Pagination },
  created() {
    this.gongsiList = JSON.parse(localStorage.getItem('companyList'));
    this.formInline.gongsiSel = this.gongsiList[0].id;
    this.initData();
  },
  methods: {
    //列表
    initData(){
      var data = {
        "pageCount": 10,
        "page": this.page,
        "searchCriteria": {
          "tenantId": this.formInline.gongsiSel,
          "status": this.formInline.status
        }
      };
      postTicketFind(data).then((res)=>{
        console.log(res)
        this.dataList = res.result.tickets;
        this.total = res.result.totalCount;
      })
    },
    //时间格式转化
    timeChange(UTCDateString) {
      if (!UTCDateString) {
        return '-';
      }
      function formatFunc(str) {
        return str > 9 ? str : '0' + str
      }
      var date2 = new Date(UTCDateString);
      console.log('时间', date2)
      var year = date2.getFullYear();
      var mon = formatFunc(date2.getMonth() + 1);
      var day = formatFunc(date2.getDate());
      var hour = date2.getHours();
      var noon = hour >= 12 ? 'PM' : 'AM'; // 判断是上午还是下午
      hour = hour >= 12 ? hour - 12 : hour; // 12小时制
      hour = formatFunc(hour);
      var min = formatFunc(date2.getMinutes());
      var sec = formatFunc(date2.getSeconds());
      var dateStr = year + '-' + mon + '-' + day + ' ' + hour + ':' + min + ':' + sec;
      return dateStr;
    },
    //导出
    handleExport(){

    },
    //重置
    handleReset(){
      this.formInline = {
        gongsiSel:'',
        status:0
      };
      this.initData();
    },
    //过滤查询
    check(){
      this.initData();
    },
    //分页
    pagination(data) {
      this.page = data.page-1;
      this.initData();
    },
    handleAddRole(scope) {
      this.role = Object.assign({}, defaultRole)
      getTicket(scope.row.id).then((res)=>{
        console.log(res)
        var obj = res.result;
        Object.keys(this.role).forEach(key=>{this.role[key]=obj[key]?obj[key]:''})
        this.role.deviceId = obj.device.deviceId;
        this.dialogVisible = true
      })
    },
    handleEdit(scope) {
      this.role = Object.assign({}, defaultRole)
      this.orderId = scope.row.id;
      getTicket(scope.row.id).then((res)=>{
        console.log(res)
        var obj = res.result;
        Object.keys(this.role).forEach(key=>{this.role[key]=obj[key]?obj[key]:''})
        this.role.deviceId = obj.device.deviceId;
        this.editshow = true
      })
    },
    async confirmRole() {
      if(this.role.status == 4){
        this.role.isAbnormal = true;
      }else{
        this.role.isAbnormal = false;
      }
      // this.role.onCount = Number(this.role.onCount);
      // this.role.offCount = Number(this.role.offCount);
      // this.role.realCount = Number(this.role.realCount);
      putTicket(this.orderId,this.role).then((res)=>{
        this.$message({
          type: 'success',
          message: '修改成功!'
        })
        this.editshow = false;
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
